<template>
  <!-- 签约管理 * 待签约列表 -->

  <div class="refuter">
    <!-- 第一行 - 签约  -->
    <div style="
            border-bottom: 1px dashed #efefef;
            display: flex;
            margin-bottom: 30px;
          " class="refuter_top">
      <div class="display" style="margin-left: 20px">
        <b class="lhy_b">所属机构：</b>
        <el-select style="margin-right: 20px; width: 200px" v-model="value" class="m-2" placeholder="请选择所属机构">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div style="margin-left: 17%">
        <el-button color="#18C4B4" style="color: #fff">新增医生</el-button>
        <el-button color="#1684FC" style="margin-left: 20px">申请加入团队</el-button>
        <el-button style="margin-left: 20px">导出</el-button>
      </div>
    </div>

    <p class="theam_p">当前共计 <b>169</b>个团队，<b>303</b>名医生</p>

    <!-- table表格 -->
    <el-table :data="ebooks1.books.slice((pages - 1) * pageSize, pages * pageSize)" style="width: 100%">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column type="index" label="编号" width="55"> </el-table-column>
      <el-table-column property="img" label="头像">
        <template #default="scope">
          <el-image style="width: 75px; height: 75px" :src="scope.row.img" :fit="fit" />
        </template>
      </el-table-column>

      <el-table-column property="name" label="团队名称" />
      <el-table-column property="tuan" label="团长" />
      <el-table-column property="tag" :formatter="formatter"  label="团队标签"  width="220">
        <template #default="scope">
          <el-tag v-for="item in scope.row.tag" :style={color:item.color} style="margin-right:5px">{{item.name}}</el-tag>

        </template>
      </el-table-column>
      <el-table-column property="organ.name" label="所属机构" width="220" />
      <el-table-column property="people" label="签约人数" />
      <el-table-column property="rate" label="评分" />
      <el-table-column property="state" label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.state" />
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <a style="margin-right: 10px">查看详情</a>
        <a>解散团队</a>
      </el-table-column>
    </el-table>
    <div style="margin-top: 15px">
      <el-pagination @update:current-page="changePage" v-model:current-page="page" background :page-size="pageSize"
        layout="prev, pager, next" :total="ebooks1.books.length" />
    </div>
  </div>
</template>
    
<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable } from "element-plus";
import axios from "axios";
import request from "@/request";

let ebooks1 = reactive({
  books: [],
});
let getDate = () => {
  axios.get("http://localhost:3461/api/doctor_team").then((res) => {
    console.log(res.data.data, 11111);
    // console.log(res.data.data);
    ebooks1.books = res.data.data;
    console.log(ebooks1.books, "156");
  });
};
onMounted(() => {
  getDate();
});

// 当前页
let pages = ref(1);
// 每页显示条数
let pageSize = 5;
// 更改页数
let changePage = (page) => {
  console.log(page);
  pages.value = page;
  console.log(pages);
};
</script>
    
<style lang="scss" scoped>
.theam_p {
  height: 20px;
  border: 1px solid #ccc;
  padding: 20px 0px 40px 15px;

  b {
    color: #388cf8;
  }
}
</style>